<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />
</head>

<body>
    <div id="app">
        <div class="row">
            <div class="col-xs-offset-2 col-xs-8">
                <div class="page-header">
                    <h2>Router Basic - 02</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    <!--router-link默认会被渲染成一个 `<a>` 标签-->
                    <router-link class="list-group-item" to="/home">Go to Home</router-link>
                    <router-link class="list-group-item" to="/about">Go to About</router-link>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-body">
                        <!--用于渲染匹配的组件-->
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <template id="home">
        <div>
            <div>
                <h1>Home</h1>
                <p>{{msg}}</p>
            </div>
            <div>
                <ul class="nav nav-tabs">
                    <li>
                        <router-link class="list-group-item" to="/home/news">News</router-link>
                    </li>
                    <li>
                        <router-link class="list-group-item" to="/home/message">Messages</router-link>
                    </li>
                </ul>
                <p>
                    <router-view></router-view>
                </p>
            </div>
        </div>
    </template>

    <template id="news">
        <ul>
            <li>News 01</li>
            <li>News 02</li>
            <li>News 03</li>
        </ul>
    </template>
    <template id="message">
        <ul>
            <li>Message 01</li>
            <li>Message 02</li>
            <li>Message 03</li>
        </ul>
    </template>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    /* 创建组件构造器  */
    var Home = Vue.extend({
        template: '#home',
        data: function () {
            return {
                msg: 'Hello, vue router!'
            }
        }
    })

    var About = Vue.extend({
        template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
    })

    var News = Vue.extend({
        template: '#news'
    })

    var Message = Vue.extend({
        template: '#message'
    })
    // 创建Router
    const routes = [{
            path: '/home',
            component: Home,
            children: [{
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message
                }
            ]
        },
        {
            path: '/about',
            component: About
        }
    ]
    const router = new VueRouter({
        routes
    })

    router.push("/home")
    // 启动路由
    const app = new Vue({
        router
    }).$mount('#app')
</script>

</html>